import { init } from "snabbdom/build/package/init"
import { h } from "snabbdom/build/package/h"
import { thunk } from "snabbdom/build/package/thunk"
let patch = init([])
/**
 * @parma
 * 1 标签+选择器
 * 2 如果是字符串 就是表标签中的内容 如果是数组可以添加子元素
 */
let vnode = h('div#content.cls', 'Hellow World')
let app = document.getElementById('app')
console.log(app)
/**
 * patch 
 * 对比两个参数，如果有变化就用第二个参数区替换第一个渲染在dom上
 * @param 
 * 1 DOM  把dom转换成vnode
 * 2 vnode
 * 返回 vnode
 */
let oldVnode = patch(app,vnode)

// 创建子元素
let vnode2 = h('div#xxx.cls', [
  h('h1', 'h1h1h11h'),
  h('p','ppppp')
])

oldVnode = patch(oldVnode,vnode2)

setTimeout(_ => {
  vnode2 = h('div#xxx.cls', [
    h('h1', 'h1h1h11hxxxx'),
    h('p','pppppxxxxx')
  ])
  oldVnode = patch(oldVnode, vnode2)
  //清空节点 h('!')
  setTimeout(_=>{patch(oldVnode, h('!'))}, 2000)
}, 2000)